<template>
  <el-dialog :title="title"  :visible="visible" :close-on-click-modal="false"
             :before-close="handleClose" width="500px">
    <el-form :model="formData" :rules="rules" ref="formData" label-width="80px">

        <el-form-item label="课程类型" prop="avatarUrl" >
        <el-upload class="avatar-uploader"  action="" :accept="acceptType" :http-request="beginUpload" :show-file-list="false">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <el-progress :percentage="Number(percentage.toFixed(2))"></el-progress>
      </el-form-item>

      <el-form-item label="课程类型" prop="courseType" >
         <el-select v-model="formData.courseType"  style="width:350px" placeholder="请选择课程类型">
              <el-option
                  v-for="item in courseType"
                  :key="item"
                  :label="item"
                  :value="item">
              </el-option>
          </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="text" @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleSubmit"
                 :loading="loading">{{loading?'提交中...':'确认提交'}}</el-button>
    </span>
  </el-dialog>
</template>

<script>
 import {add} from "@/api/modules/create_class";
  import {select} from "@/api/modules/courseType";
    import OSS from 'ali-oss'
    // const upurl='';
    var upurl = ''
  export default {
    name: "edit",
    props: {
      visible: {
        type: Boolean
      },
      title: {
        type: String,
        default: '新增'
      },

      defaultFormData: {
        type: Object
      },
    acceptType:{
           type: String,
            default: 'image/*'  
      },
    },
    data() {
      return {
        imageUrl: '',
        percentage: 0,
        checkpoint: null,
        client: null,
        filename: '',
        upurl: '',
        loading: false,
        courseType:[],
        formData: {
        },
        rules: {
          courseType: [
            {required: true, message: "密码不能为空", trigger: "blur"}
          ]
        },
        
        refresh: false
      }
    },
     created(){
      this.client = new OSS({
                region: 'oss-cn-hangzhou',
                accessKeyId: 'LTAI4GGkWMN9SyN1AkRK6qCT',
                accessKeySecret: 'sQf4RnuvZM47hXV5XxBazZqyXzJyNU',
                bucket: '0628',
                secure: false
            })
    },
    mounted() {
      this.getType()
      //this.getAllListRole()
      //console.log(JSON.stringify(this.defaultFormData) == "{}")
      if (JSON.stringify(this.defaultFormData) == "{}") {

      }else{
        let formData = this.clone(this.defaultFormData)
        this.formData = JSON.parse(JSON.stringify(formData))
      }
    },
    methods: {
         async ossUpload(filename, file) {
                let _this = this
                try {
                    let result = await _this.client.multipartUpload(filename, file, {
                        progress: async function (p, checkpoint) {
                            _this.checkpoint = checkpoint
                            _this.percentage = p * 100
                        },
                        checkpoint: _this.checkpoint
                    })
                    console.log(result)
                } catch (e) {
                    console.log(e)
                }
            },
      //上传视频
       beginUpload(file) {
          const isWord = ['image/jpeg','image/png',].includes(file.file.type);
                if(!isWord) this.$message.error('视频必须是.jpg或.png');
                else{
                let _this = this
                let filename = file.file.name
                filename = filename.split('.')[0] + '_' + new Date().getTime() + '.' + filename.split('.')[1]
                _this.file = file
                _this.filename = filename
                _this.ossUpload(filename, file.file)
                //保存上传的文件下载地址
                upurl = this.client.signatureUrl(_this.filename);
                this.formData.avatarUrl = upurl
               // console.log(upurl)
                // location.reload();
                }
      },
       //课程类型下拉实现
       getType(filter){
          select(null).then(res =>{
              this.courseType = res.data.courseTypelist
          })
       },
      handleClose() {
        this.$emit('close', this.refresh)
      },
      handleSubmit() {
        this.$refs.formData.validate(valid => {
          if (valid) {
            this.loading = true
            
              add({
                ...this.formData,
              }).then(res => {
                this.loading = false
                if (res.success) {
                  this.refresh = true
                  this.toast(res.message)
                  this.handleClose()
                }
              }).catch(data =>{
                    this.toast(data,5)
                    this.refresh = true
                    this.handleClose()
                }) 
           
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>
